<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'
import List from './components/List.vue'

// 核心步骤
// 1.声明响应式数据（ref+ts）
import { ChannelItem, ChannelRes } from './types/data'

const channelList = ref<ChannelItem[]>([])

// 2.axios获取后端数据（axios.request<类型>）
const getList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels',
    method: 'GET'
  })

  // 3.后端数据赋值给响应式列表（类型自然匹配）
  channelList.value = res.data.data.channels
}
onMounted(() => getList())

// 4.响应式列表渲染到模板（自然获得类型提示）
</script>

<template>
  <!-- tab切换 -->
  <van-tabs>
    <van-tab :title="item.name" v-for="item in channelList" :key="item.id">
      <!-- 文章列表组件 -->
      <List :channelId="item.id" />
    </van-tab>
  </van-tabs>
</template>
